<template>
  <el-dialog
    v-model="dialogVisible"
    width="900px"
    :before-close="handleClose"
    class="course-setting-dialog"
    destroy-on-close
  >
    <template #header>
      <span class="dialog-title">课程列表</span>
    </template>
    <div class="dialog-content">
      <el-table :data="listData" style="width: 100%; min-height: 400px">
        <el-table-column>
          <template #default="{ row }">
            <div class="course-item">
              <div class="item-header">
                <div class="title-wrapper">
                  <div class="item-title">
                    <span
                      class="item-subject"
                      :style="`background-color: ${getGradeColor(row.subjectName)}`"
                      >{{ row.subjectName }}</span
                    >
                    <span class="item-treeName">{{ row.courseTreeName }}</span>
                  </div>
                  <div class="item-subtitle">
                    <!-- <img
                      src="@/assets/classSchedule/see1-icon.png"
                      @click="seePreviewHandle(row)"
                      alt="查看"
                      class="see-icon"
                    /> -->
                  </div>
                </div>
                <div class="item-actions" v-if="row.planStatus === 0">
                  <span class="edit" @click.stop="handleEdit(row)">编辑</span>
                  <span class="delete" @click.stop="handleDelete(row)"
                    >删除</span
                  >
                </div>
              </div>
              <div class="item-info">
                <span class="info-item">截止时间：{{ row.endTime }}</span>
                <span class="info-item">添加时间：{{ row.createTime }}</span>
              </div>
              <div class="item-target">
                <span>课程对象：</span>
                <span v-if="[1, 2].includes(row.courseObjectType)">全班</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        background
      />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { useCommon } from '../index'
export interface StudentH5VOList {
  id: string
  coursePlanId: string
  studentId: string
  studentName: string
}
export interface CourseSetListItem {
  id: string
  courseId: string // 课程Id
  courseName: string // 课程名称
  courseObjectId: string // 课程对象id
  courseScheduleId: string // 课表id
  endTime: string // 结束时间
  startTime: string // 开始时间
  scheduleDate: string // 排课时间
  teacherId: string // 老师id
  periodId: string // 节次id
  planStatus: number // 状态 （0：未开始，1：进行中，3：已结束）
  courseObjectType: number | string
  courseTreeId: string
  studentH5VOList: StudentH5VOList[]
  tenantId: string
  endSemesterDate?: string
}

interface Pagination {
  currentPage: number
  pageSize: number
  total: number
}

export type DataProps = {
  id: string
  num: number
  courseScheduleId?: string
}
const courseSetDetail = ref<DataProps | null>(null)

const { getGradeColor } = useCommon()
const dialogVisible = ref(false)
const listData = ref<CourseSetListItem[]>([])
const currentListData = ref<CourseSetListItem>()

const pagination = reactive<Pagination>({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const Emit = defineEmits<{
  (e: 'editHandle', data: CourseSetListItem): void
  (e: 'seePreviewHandle', data: CourseSetListItem): void
  (e: 'delCourseDetailHandle'): void
}>()
const handleSizeChange = (val: number) => {
  pagination.pageSize = val
  getCourseListInfoApi()
}

const handleCurrentChange = (val: number) => {
  pagination.currentPage = val
  getCourseListInfoApi()
}

const handleEdit = (row: CourseSetListItem) => {
  Emit('editHandle', row)
  // courseSetDetailRef.value?.openDialog(row)
}

const handleDelete = async (row: CourseSetListItem) => {
  currentListData.value = row
  Emit('delCourseDetailHandle')
}

const handleClose = (done: () => void) => {
  done()
  listData.value = []
  pagination.currentPage = 1
}

// const seePreviewHandle = (row: CourseSetListItem) => {
//   Emit('seePreviewHandle', row)
// }

// const studentListToSting = computed(() => {
//   return (list: StudentH5VOList[]): string => {
//     const txtArr: string[] = []
//     list.forEach((element: StudentH5VOList) => {
//       if (element.studentName) {
//         txtArr.push(element.studentName)
//       }
//     })
//     return txtArr.join('、')
//   }
// })

// 课程列表api
const getCourseListInfoApi = async () => {
  listData.value = [
    {
      id: '1984157287065313281',
      courseScheduleId: '1984157287052730369',
      periodId: '1984142668204085249',
      planStatus: 0,
      scheduleDate: '2025-11-05',
      courseId: '8',
      courseName: '语文',
      courseTreeId: '2088',
      teacherId: '1984137703431606274',
      startTime: '2025-11-05 08:00:00',
      endTime: '2025-11-05 08:40:59',
      courseObjectType: 3,
      courseObjectId: '1984138444250550273',
      tenantId: '1984134462560399362',
      studentH5VOList: [
        {
          id: '1984181649894875137',
          coursePlanId: '1984157287065313281',
          studentId: '1984141886209658882',
          studentName: '一组'
        },
        {
          id: '1984181649907458050',
          coursePlanId: '1984157287065313281',
          studentId: '1984141911467757569',
          studentName: '二组'
        },
        {
          id: '1984181649907458051',
          coursePlanId: '1984157287065313281',
          studentId: '1984141886209658882',
          studentName: '一组'
        },
        {
          id: '1984181649911652353',
          coursePlanId: '1984157287065313281',
          studentId: '1984141911467757569',
          studentName: '二组'
        },
        {
          id: '1984181649911652354',
          coursePlanId: '1984157287065313281',
          studentId: '1984141886209658882',
          studentName: '一组'
        },
        {
          id: '1984181649915846658',
          coursePlanId: '1984157287065313281',
          studentId: '1984141911467757569',
          studentName: '二组'
        },
        {
          id: '1984181649920040961',
          coursePlanId: '1984157287065313281',
          studentId: '1984141886209658882',
          studentName: '一组'
        },
        {
          id: '1984181649920040962',
          coursePlanId: '1984157287065313281',
          studentId: '1984141911467757569',
          studentName: '二组'
        }
      ]
    }
  ]
  console.log(listData.value)
  pagination.total = 0
}

defineExpose({
  openDialog: (data: DataProps) => {
    console.log(data, 'datadatadatadata')
    courseSetDetail.value = data
    getCourseListInfoApi()
    dialogVisible.value = true
  }
})
</script>

<style lang="scss" scoped>
// 颜色变量
$primary-color: #165dff;
$text-title: #1d2129;
$text-normal: #4e5969;
$text-desc: #909399;
$border: #dcdfe6;

.dialog-title {
  font-size: 16px;
  font-weight: bold;
  color: $text-title;
}

:deep(
  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell
) {
  background-color: transparent;
}
:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
  border-bottom: none;
}
:deep(.el-table_1_column_1) {
  border-bottom: 0 !important;
}
:deep(.el-table__inner-wrapper:before) {
  display: none;
}
:deep(.el-table .el-table__cell) {
  border-bottom: 0 !important;
  padding: 5px 0;
}
:deep(.el-table .cell) {
  padding-left: 0;
  padding-right: 0;
}
.dialog-content {
  border-top: #e5e6eb 1px solid;
}
.dialog-content {
  max-height: 60vh;
  overflow-y: auto;
}
.course-item {
  border: 1px solid #c9cdd4;
  border-radius: 8px;
  padding: 14px 20px;
  background-color: #fff;
  transition: box-shadow 0.2s;

  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}
.item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.title-wrapper {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
}

.item-title {
  font-size: 16px;
  font-weight: 600;
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.item-subject {
  font-weight: normal;
  font-size: 12px;
  border-radius: 3px;
  color: #fff;
  padding: 0 6px;
  display: inline-block;
  margin-right: 6px;
  height: 20px;
  line-height: 19px;
}
.item-treeName {
  font-size: 14px;
  color: $text-normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 660px;
}
.item-subtitle {
  display: flex;
  align-items: center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.see-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.item-actions {
  display: flex;
  white-space: nowrap;
}

.edit {
  color: $primary-color;
  cursor: pointer;
  margin-left: 14px;
  font-size: 14px;

  &:first-child {
    margin-left: 0;
  }
}

.delete {
  color: #f53f3f;
  cursor: pointer;
  margin-left: 14px;
  font-size: 14px;
}
.item-info {
  display: flex;
  font-size: 14px;
  color: $text-desc;
  margin-bottom: 6px;
  gap: 20px;
}

.info-item {
  white-space: nowrap;
}
.item-target {
  display: flex;
  font-size: 14px;
  color: $text-normal;
  min-width: 0;
}

.target-text {
  margin-left: 6px;
  flex: 1;
  min-width: 0;
}

.pagination-container {
  margin: 16px 20px 10px;
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
:deep(.course-setting-dialog) {
  border-radius: 10px;

  .el-dialog__body {
    padding: 10px 0 0;
  }

  .el-table {
    &::before {
      display: none;
    }

    td.el-table__cell,
    th.el-table__cell.is-leaf {
      border-bottom: none;
    }

    .el-table__row--striped {
      td.el-table__cell {
        background: #f9f9f9;
      }
    }
  }
}
</style>
